import { DomUtils } from "../utils/DomUtils";

/**
 * ### 百度贴吧网页美化
 * 
 * 测试网页:
 * - https://tieba.baidu.com/p/5302900027
 */
export class BaiduTieba {

    static hostname = 'tieba.baidu.com';

    main() {
        DomUtils.hide([
            // 顶部header，包含网页导航链接和搜索框
            '.head_inner',
            '#com_userbar',
            // 右侧边栏
            '.right_section',
            // 右侧悬浮按钮组
            '.tbui_aside_float_bar',
            // 帖子楼层中的"送TA礼物"、"分享"按钮
            ...document.querySelectorAll('.share_btn_wrapper'),
            // 夹杂在帖子楼层中的广告楼层
            ...document.querySelectorAll('div[id^="mediago"]'),
            // 评论输入框
            '.pb_footer',
            // 页面底部的占位元素
            'main.svelte-zmnt4x',
            // 帖子标题右边的回复按钮
            '#quick_reply',
            // 登录弹窗
            '#tiebaCustomPassLogin'
        ]);
        DomUtils.hide(['.tbui_aside_float_bar'], 'scale');
        DomUtils.setBackground();
        DomUtils.setCss('.wrap1', { background: 'none', padding: '20px 0' });
        DomUtils.setCss('.wrap2', { background: 'none', paddingBottom: 0 });
        DomUtils.setCss('#head', { background: 'none' });
        DomUtils.setCss('#j_core_title_wrap', { width: '980px', padding: '0 15px', boxSizing: 'border-box' });
        DomUtils.appendStyle(`
            #container {
                border-radius: 10px;
                overflow: hidden;
            }
            .left_section, .l_post_bright {
                width: 100%;
            }
            .d_post_content_main {
                width: 828px;
            }
            .core_reply_wrapper {
                width: 813px;
            }
            #j_core_title_wrap > h3 {
                font-size: 24px;
                font-weight: bold;
                width: 800px !important;
            }
        `);
        // 左侧的广告
        document.querySelector('.close_btn.j_click_close')?.click();
        // 全屏登录弹窗
        DomUtils.observe('#tiebaCustomPassLogin', ['attributes'], { attributeFilter: ['style'] }, 
            ({ target, observer }) => {
            target.style.display = 'none';
            observer.disconnect();
        });
        const test = document.querySelector('.tbui_aside_float_bar');
        console.log("🚀 ~ BaiduTieba ~ main ~ test:", test)
        
    }

}